<!--
 * @Author: 陈 娇
 * @Date: 2021-04-14 13:55:06
 * @LastEditTime: 2021-06-04 10:07:55
 * @LastEditors: Please set LastEditors
 * @Description: 节日设置
 * @FilePath: \ebc-admin\src\views\basics\GeneralSet\Festival.vue
-->
<template>
  <div class="no-padding">
    <adminTable
      ref="refTable"
      :form-inline="formInline"
      :api-fun="apiFun"
      :table-column="tableColumn"
      :table-data.sync="tableData"
    >
      <!-- 搜索 -->
      <template slot="search">
        <el-form-item>
          <el-input
            v-model="formInline.keyword"
            clearable
            placeholder="节日名称"
          />
        </el-form-item>
      </template>
      <el-form-item slot="button">
        <el-button type="success" @click="addClick">添加</el-button>
      </el-form-item>
      <template slot="modifierName" slot-scope="scope">
        {{ scope.value.modifierName }}
      </template>
      <!-- 表格操作 -->
      <template slot="operate" slot-scope="scope">
        <el-button type="text" size="small" @click="editClick(scope.value)"> 编辑</el-button>
        <el-button type="text" size="small" @click="deleteClick(scope.value)">删除</el-button>
      </template>
    </adminTable>
    <!-- 弹窗 -->
    <el-dialog
      :title="`${detail ? '编辑' : '添加'}节日`"
      :visible.sync="dialogFormVisible"
      @open="$refs.form && $refs.form.resetForm()"
    >
      <edit-form
        ref="form"
        :edit-list="editList"
        :form="form"
        :rules="rules"
        @on-submit="addOrEdit()"
      />
      <!-- 弹窗操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="$refs.form && $refs.form.ruleFrom()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 组件引入
import adminTable from '@/components/admin/admin-table'
import EditForm from '@/components/admin/edit-form.vue'

// 接口
import { festivalsList, setFestivals, delFestivals, festivalPullList } from '@/api/basics'
// 页面配置
import { festiveClumen, createList } from './config/general.config'
// 公共方法
import { openMessageBox, asyncApiFun } from '@/utils/utils'

export default {
  components: {
    adminTable,
    EditForm
  },
  data() {
    return {
      tableColumn: festiveClumen,
      tableData: [],
      formInline: {
        keyword: ''
      },
      params: {},
      apiFun: festivalsList,
      apiFun2: festivalPullList,
      dialogFormVisible: false,
      detail: null,
      formData: {},
      form: {},
      editList: [],
      holidayId: '',
      rules: {
        holiday: [
          { required: true, message: '请输入节日名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 编辑节日
    async  editClick({ holiday, id }) {
      const [res] = await asyncApiFun(festivalPullList)
      const _list = res.data.map((item, index) => ({ label: index, value: item }))
      this.editList = createList(_list)
      this.dialogFormVisible = true
      this.detail = true
      this.form = { holiday }
      this.holidayId = id
    },
    // 添加节日
    async addClick() {
      // 接口请求
      const [res] = await asyncApiFun(festivalPullList)
      const _list = res.data.map((item, index) => ({ label: index, value: item }))
      console.log(_list)
      this.editList = createList(_list)
      this.dialogFormVisible = true
      this.detail = false
    },
    //  新增或编辑
    async addOrEdit() {
      const id = (this.detail ? this.holidayId : '')
      const _params = {
        ...this.form,
        id
      }
      // 发起请求
      const [res] = await asyncApiFun(setFestivals, _params)
      // 提交处理
      if (res) {
        if (this.detail) {
          this.$message({ message: '编辑成功', type: 'success' })
        } else {
          this.$message({ message: '添加成功', type: 'success' })
        }
        // 关闭弹窗
        this.dialogFormVisible = false
        // 刷新列表数据
        this.refreshList()
      }
    },
    // 删除点击弹出提示
    deleteClick(row) {
      openMessageBox(
        {
          content: '删除数据后，将不可恢复，是否确认？',
          title: '删除数据'
        },
        (boole) => {
          if (boole) {
            // 删除角色接口请求
            delFestivals({ id: row.id }).then((res) => {
              this.$message({ message: '删除成功', type: 'success' })
              this.$refs.refTable.getList()
            })
          }
        }
      )
    },
    // 初始化列表请求参数
    initParams(param) {
      this.params = param
    },

    refreshList() {
      this.$refs.refTable.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
